<template>
    <div class="index">
        <header class="header">
            <img
                class="header_img"
                :src="logo" />
            <span class="header_title normal">烟草线上办事大厅</span>
            <span class="header_subTitle normal">&#x653f;&#x52a1;&#x670d;&#x52a1;&#x5e73;&#x53f0;</span>
        </header>
        <br />
        <p
            class="tab"
            v-if="active == '1' || active == '2'">
            <img
                class="checkbox"
                :src="active == '2' ? require('@/assets/images/index/no_check.jpg') : require('@/assets/images/index/checked.jpg')"
                alt=""
                @click="active = '1'" />
            <span
                @click="active = '1'"
                :class="active == '1' ? 'tab_login selected' : 'tab_login'"
                >个体户</span
            >
            <img
                class="checkbox"
                :src="active == '1' ? require('@/assets/images/index/no_check.jpg') : require('@/assets/images/index/checked.jpg')"
                alt=""
                @click="active = '2'" />
            <span
                @click="active = '2'"
                :class="active == '2' ? 'tab_register selected' : 'tab_register'"
                >企业法人</span
            >
        </p>
        <p
            class="tab"
            v-if="active == '3' || active == '4'">
            <img
                class="checkbox"
                :src="active == '4' ? require('@/assets/images/index/no_check.jpg') : require('@/assets/images/index/checked.jpg')"
                alt=""
                @click="active = '3'" />
            <span
                @click="active = '3'"
                :class="active == '3' ? 'tab_login selected' : 'tab_login'"
                >个体户</span
            >
            <img
                class="checkbox"
                :src="active == '3' ? require('@/assets/images/index/no_check.jpg') : require('@/assets/images/index/checked.jpg')"
                alt=""
                @click="active = '4'" />
            <span
                @click="active = '4'"
                :class="active == '4' ? 'tab_register selected' : 'tab_register'"
                >企业法人</span
            >
        </p>
        <!-- 登录的表单 -->
        <van-form
            v-if="active == '1' || active == '2'"
            validate-first
            @submit="onSubmit">
            <van-field
                left-icon="manager-o"
                label="用户名"
                v-model="loginForm.username"
                name="pattern"
                placeholder="请输入用户名"
                maxlength="8"
                :rules="[{ required: true }]" />
            <!-- :left-icon="require('@/assets/images/index/password.png')" -->
            <van-field
                left-icon="closed-eye"
                label="密   码"
                v-model="loginForm.password"
                name="pattern"
                placeholder="请输入密码"
                type="password"
                :rules="[{ required: true }]" />
            <van-row>
                <!-- <van-col span="15">
                    <van-field
                        label="验证码"
                        v-model="loginForm.verify"
                        name="pattern"
                        placeholder="请输入验证码"
                        :rules="[{ required: true }]">
                    </van-field>
                </van-col> -->
                <!-- <van-col span="6">
                    <img
                        :src="verify"
                        @click="changeImg" />
                </van-col> -->
            </van-row>
            <div style="margin: 2rem">
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    class="loginBtn"
                    >登 陆</van-button
                >
            </div>

            <div style="margin: 2rem">
                <span
                    class="loginBtn van-button van-button--default van-button--normal van-button--block van-button--round"
                    @click="active = '3'"
                    style="line-height: 44px"
                    >立即注册</span
                >
            </div>
        </van-form>
        <!-- 注册的表单 -->
        <van-form
            v-if="active == '3' || active == '4'"
            validate-first
            @submit="registerSubmit">
            <van-field
                label="用户名"
                left-icon="manager-o"
                v-model="registerForm.username"
                name="pattern"
                placeholder="请输入用户名"
                maxlength="8"
                type="text"
                :rules="[{ required: true }]" />
            <van-field
                label="密   码"
                left-icon="closed-eye"
                v-model="registerForm.password"
                name="pattern"
                placeholder="请输入密码"
                type="password"
                :rules="[{ required: true }]" />
            <van-field
                label="确认密码"
                left-icon="closed-eye"
                v-model="registerForm.rpassword"
                name="pattern"
                placeholder="请确认密码密码"
                type="password"
                :rules="[{ validator: validator, required: true }]" />
            <van-field
                label="电   话"
                left-icon="phone-o"
                v-model="registerForm.tel"
                name="pattern"
                placeholder="请输入电话"
                type="tel"
                maxlength="11"
                :rules="[{ required: true }, { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '手机号格式不正确' }]" />
            <van-field
                label="推荐码"
                left-icon="scan"
                v-model="registerForm.yqm"
                name="pattern"
                placeholder="请输入邀请码"
                maxlength="16"
                :rules="[{ required: true }]" />
            <div style="margin: 2rem">
                <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    class="loginBtn"
                    >注 册</van-button
                >
            </div>
            <div style="margin: 2rem">
                <span
                    class="loginBtn van-button van-button--default van-button--normal van-button--block van-button--round"
                    @click="active = '1'"
                    style="line-height: 44px"
                    >立即登录</span
                >
            </div>
        </van-form>

        <footer>
            <section>
                <img
                    class="icon"
                    :src="tu1" />
            </section>
            <section>
                <img
                    class="icon"
                    :src="tu2" />
            </section>
        </footer>
    </div>
</template>
<script>
import { Notify } from 'vant';
import { setToken } from '@/utils/auth';
export default {
    data() {
        return {
            logo: require('@/assets/logo.png'),
            verify: '/captcha.html?d=0.6458979615902538', // 默认是本地的
            baseUrl: process.env.VUE_APP_BASE_URL,
            active: '1',
            loginForm: {},
            registerForm: {},
            tu1: '0',
            tu2: '0',
            // 动态渲染，在请求里面直接给icon1、icon2赋值即可
            icon1: require('../../assets/images/index/guohui.png'),
            icon2: require('../../assets/images/index/title.png'),
        };
    },
    created() {
        this.initData();
        this.initDatas();
    },
    methods: {
        initData() {
            // this.$http.post('/api/api/cf').then(res => {
            // this.$http.post('/api/api/cf').then(res => {
            //     const { success, data, msg } = res.data;
            //     this.tu1 = data.tu1;
            //     this.tu2 = data.tu2;
            // });
        },
        initDatas() {
            // this.$http.post('/api/api/chick').then(res => {
            //     const { success, data, msg } = res.data;
            //     success && this.$router.push('/home');
            // });
        },
        // 登录
        onSubmit() {
            if (this.active == 1) {
                console.log('个体工商户');
            } else if (this.active == 2) {
                console.log('企业法人');
            }

            let data = { username: this.loginForm.username, password: this.loginForm.password, type: this.active };
            //    this.$http.post('/api/api/login',data).then(res => {
            //         const { success, data, msg } = res.data;
            //         if (success) {
            //             this.$store.commit('SET_TOKEN', data.token);
            //           this.$store.commit('SET_USER', data.user);
            //            setToken(data.token);
            //        }
            //      Notify({ type: success ? 'success' : 'warning', message: msg });
            //        success && this.$router.push('/home');
            //     });
        },
        // 切换验证码图片
        changeImg() {
            this.verify = '';

            this.$nextTick(() => {
                this.verify = '/captcha.html?d=0.6458979615902538';
            });
        }, // 校验两次密码是否一致
        validator(val) {
            const flag = this.registerForm.password === val;
            if (!flag) {
                Notify({ type: 'warning', message: '两次密码不一致!' });
                return false;
            }
        },
        // 注册用户
        registerSubmit() {
            if (this.active == 3) {
                console.log('个体工商户');
            } else if (this.active == 4) {
                console.log('企业法人');
            }
            let data = {
                username: this.registerForm.username,
                yqm: this.registerForm.yqm,
                tel: this.registerForm.tel,
                password: this.registerForm.password,
                type: this.active,
            };
            this.$http.post('/api/api/register', data).then(res => {
                const { success, data, msg } = res.data;
                Notify({ type: success ? 'success' : 'warning', message: msg });
                success &&
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
            });
        },
        // 政务图标获取
        getIcon() {
            this.$http.post('/api/api/xxx').then(res => {
                const { success, data, msg } = res.data;
                this.icon1 = res.data.url1;
                this.icon2 = res.data.url2;
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.index {
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/index/background.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .header {
        height: 6rem;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        .normal {
            font-family: '黑体';
            font-weight: bolder;
        }

        &_img {
            height: 4.5rem;
            margin-left: 1rem;
        }
        &_title {
            font-size: 1.5rem;
            @extend.normal;
        }
        &_subTitle {
            font-size: 1rem;
            font-style: italic;
            margin-left: 0.5rem;
            position: relative;
            top: 0.1rem;
            @extend.normal;
        }
    }
    .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        .checkbox {
            width: 1.8rem;
            height: 1.8rem;
            margin-right: 5px;
        }
        &_login {
            margin-right: 2rem;
            font-size: 1.6rem;
            color: rgb(108, 107, 107);
        }
        &_register {
            font-size: 1.6rem;
            color: rgb(108, 107, 107);
        }
        .selected {
            font-size: 2rem;
            color: #005ca2;
            font-weight: bold;
            position: relative;
            bottom: 0.25rem;
        }
    }
    .loginBtn {
        background: #005ca2;
        border: unset;
        color: white;
        font-size: 1.6rem;
    }
    .tooltip {
        font-size: 1.2rem;
        &_ {
            color: red;
        }
    }
    footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        section {
            width: 40%;
            .icon {
                width: 80%;
            }
            .title {
                width: 70%;
            }
        }
    }
}
</style>
